import React from 'react'

/*
    列表渲染
    列表渲染的语法基础：jsx直接支持对数组的渲染

    在React中，官方建议使用数组的map方法进行列表渲染,需要注意的是map不是唯一

    列表渲染时，要给数组中的每一个jsx元素添加一个key值，以保证性能
*/



export default class TestList extends React.Component{
    constructor(props){
        super(props)
        this.state={
            //你可以想象这些列表数据来自后端
            list:[
                {id:1,user:'sml',age:16},
                {id:2,user:'zcm',age:16},
                {id:3,user:'ls',age:16},
                {id:4,user:'zz',age:16},
            ]
        }
    }

    //如果不需要对list进行处理，建议用这种写法
    renderList1(){
        let {
            list
        } = this.state
        //这种直接返回数组的写法，不能对列表数据进行处理，有局限性
        var arr=list.map(ele => (
            <div key={ele.id}>
                <span>{ele.id}</span>--
                <span>{ele.user}</span>--<span>{ele.age}</span>
            </div>
        ))
        return arr
    }

    //能用map()，尽量不要使用for循环和其他循环
    renderList2(){
        let {
            list
        } = this.state
        var arr=[]
        for(let i=0;i<list.length;i++){
            arr.push(<div key={list[i].id}>
                <span>{list[i].id}</span>--
                <span>{list[i].user}</span>--<span>{list[i].age}</span>
            </div>)
        }
        return arr
    }

    //如果需要对list进行处理，建议使用下面这种写法
    renderList3(){
        let {
            list
        } = this.state
        var arr = []
        list.map(ele=>{
            //do  something
            //非常灵活
            ele['pass']=Math.random()
            arr.push(<div key={ele.id}>
                <span>{ele.id}</span>--
                <span>{ele.user}</span>--<span>{ele.age}</span>--
                <span>{ele.pass}</span>
            </div>)
        })
        return arr
    }

    render(){
        let {
            list
        }=this.state
        return(
            <div>
                <h1>测试渲染</h1>
                <hr />
                {/* 工作中是像下面进行列表渲染还是封装方法，没有标准答案都可以,如果你觉得代码有点复杂，建议封装 */}
                {
                    list.map(ele=>(
                        <div key={ele.id}>
                            <span>{ele.id}</span>--
                            <span>{ele.user}</span>--<span>{ele.age}</span></div>
                    ))
                }
                <hr />
                {this.renderList1()}
                <hr />
                {this.renderList2()}
                <hr />
                {this.renderList3()}
            </div>
        )
    }
}